<template>
	<view class="page">
		<view class="wrapper">
			<view class="top">
				<view class="dis-flex flex-x-between">
					<view class="f_28 navy_blue">提现金额（元）</view><view class="f_28 violet1" @click="allWithdrawDeposit()">全部提现</view>
				</view>
				<view class="input-box dis-flex flex-y-center f_48">
					<text>￥</text><input type="number" v-model="money" />
				</view>
				<!-- <view class="f_24 red error">{{error}}</view> -->
				<view class="dis-flex flex-x-between flex-y-center f_22 balance">
					<view class="">余额：￥{{balance}}</view>
				</view>
			</view>
			<!--  -->
			<view class="middle">
				<view class="title f_28 b-b-ededed">请选择提现目标</view>
				<view v-for="(item,index) in typeList" :key="index" class="item" @click.stop="switchWay(index)">
					<view class="dis-flex flex-x-between flex-y-center ">
						<view class="dis-flex ">
							<image class="icon" :src="imgPrefix(item.icon)"></image>
							<text class="f_32">{{item.name}}</text>
						</view>
						<view class="status">
							<image :src="typeIndex==index?imgPrefix('/static/image/teacher/status_1.png'):imgPrefix('/static/image/teacher/status_0.png')"></image>
						</view>
					</view>
					<input v-if="typeIndex==1?(index==typeList.length-2):(index==typeList.length-1)" type="text" class="f_32" :placeholder="froms[input_index].placeholder" v-model="froms[input_index].value" v-for="(input_item,input_index) in (typeIndex==1?2:typeIndex==2?3:'')" placeholder-class="f_32" :key="input_index"/>
				</view>
			</view>
			<view class="bottom">
				<view class="title f_28">提现说明</view>
				<view class="explain f_24" v-for="(explain_item,explain_index) in explain" :key="explain_index">
					{{explain_index}}.{{explain_item}} <text v-if="explain_index<explain.length-1">;</text><text v-else>。</text>
				</view>
			</view>
		</view>
		<view class="btn-box t-c" @click="withdrawDeposit">
			<view class="btn f_32" :class="btnStyle">提现</view>
		</view>
	</view>
</template>

<script>
import API from '@/static/api/index.js';

const app = getApp();
	export default{
		onLoad() {
			this._getTeacherMoney()
		},
		watch:{
			typeIndex(val){
				this.froms[1].placeholder=val==1?'请输入支付宝账号':'请输入开户行名称/地址'
			}
		},
		methods:{
			withdrawDeposit(){
				let {money,typeIndex,froms} = this
				if(money!=''){
					if(typeIndex==0){
							this._getWithdrawDeposit()
					}else if(typeIndex==1){
						if(froms[0].value!=''&&froms[1].value!=''){
							this._getWithdrawDeposit()
						}
					}else if(typeIndex==2){
						if(froms[0].value!=''&&froms[1].value!=''&&froms[2].value!=''){
							this._getWithdrawDeposit()
						}
					}
				}
			},
			//全部提现
			allWithdrawDeposit(){
				this.money=this.balance
			},
			_getWithdrawDeposit(){
				let {money,typeIndex,froms} = this
				let obj={
					money:money,//提现金额
					type:typeIndex+1,//收款方式:1=微信,2=支付宝,3=银行卡
					username:froms[0].value,//姓名
					card_no:froms[2].value,//收款账号
					card_name:froms[1].value//银行名称、地址
				}
				API.getWithdrawDeposit(obj).then(res=>{
					if(res.code==1){
						this.showToast('提现成功','success')
						//清空已填数据
						this.money=''
						for (let i = 0; i < this.froms.length; i++) {
							this.froms[i].value=''
						}
						setTimeout(()=>{
							this._getTeacherMoney()
						},1000)
					}else{
						
					}
				})
			},
			switchWay(index){
				this.typeIndex=index
				// for (let i = 0; i < this.froms.length; i++) {
				// 	this.froms[i].value=''
				// }
			},
			_getTeacherMoney(){
				API.getTeacherMoney().then(res=>{
					if(res.code==1){
						this.balance=res.data.money
						this.verify=res.data.verify
						this.explain=res.data.explain.split('&')
					}else{
						this.showToast(res.msg)
					}
				})
			}
		},
		computed:{
			// error:function(){
			// 	let msg=''
			// 	let {money,available} = this
			// 	if(parseFloat(money)>parseFloat(available)){
			// 		msg='输入金额不能大于可提现金额'
			// 	}
			// 	return msg
			// },
			btnStyle:function(){
				let className=''
				let {money,available,froms,typeIndex} = this
				app._log(money)
				// if(parseFloat(money)<parseFloat(available)){}
				if(money!=''){
					if(typeIndex==0){
						className='active'
					}else if(typeIndex==1){
						if(froms[0].value!=''&&froms[1].value!=''){
							className='active'
						}
					}else if(typeIndex==2){
						if(froms[0].value!=''&&froms[1].value!=''&&froms[2].value!=''){
							className='active'
						}
					}
				}
				return className
			}
		},
		data(){
			return{
				money:'',
				balance:'0.00',//余额
				froms:[
					{value:'',placeholder:'请输入姓名'},
					{value:'',placeholder:'请输入开户行名称/地址'},
					{value:'',placeholder:'请输入银行卡号'}
				],
				typeIndex:0,//目标类型选中下标
				explain:[],
				typeList:[//目标类型
					{
						icon:'/static/image/teacher/wechat.png',
						name:'微信'
					},
					{
						icon:'/static/image/teacher/alipay.png',
						name:'支付宝'
					},
					{
						icon:'/static/image/teacher/bank_card.png',
						name:'银行卡'
					}
				]
			}
		}
	}
</script>

<style scoped lang="scss">
	.page{
		.wrapper{
			padding-bottom: 200rpx;
			background:#f8f8f8;
		}
		.top{
			background-color: white;
			padding: 0 48rpx;
			border-bottom: 16rpx solid #f4f4f4;
			.input-box{
				border-bottom:1px solid #f2f2f2;
				padding:72rpx 0 28rpx 0;
				input{
					height: 64rpx;
				}
			}
			.error{
				padding: 10rpx 0;
			}
			.balance{
				padding: 18rpx 0;
				color: rgba(143, 143, 154, 0.7);
			}
		}
		.middle{
			background-color: white;
			padding: 0 48rpx;
			border-bottom: 16rpx solid #f4f4f4;
			padding-bottom: 26rpx;
			.title{
				padding: 24rpx 0;
				border-bottom:1px solid #f2f2f2;
			}
			.icon{
				width: 48rpx;
				height: 48rpx;
				margin-right: 16rpx;
			}
			.status image{
				width: 44rpx;
				height: 44rpx;
			}
			.item{
				padding-top: 26rpx;
			}
			input{
				height: 76rpx;
				background-color: #f8f8f8;
				border-radius: 8rpx;
				margin-top: 16rpx;
				padding: 16rpx;
			}
		}
		.bottom{
			background-color: white;
			padding: 0 48rpx 16rpx 48rpx;
			.title{
				padding: 24rpx 0 26rpx 0;
				color: #333333;
			}
			.explain{
				margin-bottom: 10rpx;
				color: rgba(143, 143, 154, 0.7);
			}
		}
		.btn-box{
			position: fixed;
			bottom: 0;
			width: 100%;
			padding-top:12rpx;
			padding-bottom: calc(12rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(12rpx + env(safe-area-inset-bottom));
			background-color: white;
			.btn{
				line-height: 92rpx;
				background-color: #f0f0f6;
				border-radius: 16rpx;
				color: #d1d2db;
				margin: 0 48rpx;
			}
			.active{
				background-image: linear-gradient(270deg, 
					#7f4aff 0%, 
					#9254ff 100%);
				border-radius: 16rpx;
			}
		}
	}
</style>
